<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="{{URL::asset('js/echarts.js')}}"></script>
<script src="{{URL::asset('js/customed.js')}}"></script>
<script src="{{URL::asset('js/jspdf.min.js')}}"></script>
<script src="{{URL::asset('js/html2canvas.js')}}"></script>
<script src="{{URL::asset('js/jquery.js')}}"></script>
<div id="page-wrapper">
    <div class="box box-body" id="chart_container" style="width:210mm;padding:0 !important;margin: 0 auto;">
		<div style="width:210mm;height:297mm;background:url(/upload/kly/ScienceFestiva_A_0.png) no-repeat;background-size:210mm 297mm;margin:0;padding:0;position:relative;">
			<span id="ch_name" style="font-size: 7mm;position: absolute;top: 100mm;left: 40mm;font-famliy:'黑体'"></span>
			<span id="en_name" style="font-size: 7mm;position: absolute;top: 116.5mm;left: 40mm;font-famliy:'黑体'"></span>
			<span class="camp_sn" style="font-size: 7mm;position: absolute;top: 133mm;left: 40mm;font-famliy:'黑体'"></span>
			<span id="tutor_name" style="font-size: 7mm;position: absolute;top: 149.5mm;left: 40mm;font-famliy:'黑体'"></span>
		</div>
		<div style="width:210mm;height:297mm;background:url(/upload/kly/ScienceFestiva_A_1.png) no-repeat;background-size:210mm 297mm;margin:0;padding:0;position:relative;">
			<div style="width: 188mm;height:244mm;background: #FFF;position: absolute;top:43mm;left:11mm;"></div>
			<div id="diy1" style="width: 182mm;height: 90mm;position: absolute;top: 45mm;left: 14mm;"><!-- 阅读正确率 --></div>
			<div id="diy2" style="width: 182mm;height: 90mm;position: absolute;top: 135mm;left: 14mm;"><!-- 信息 --></div>
			<div style="width: 182mm;height: 65mm;background: #dceff6;position: absolute;border-radius: 3mm;top: 219mm;left: 14mm;">
				<div id="diy2-text" style="width: 176mm;margin:3mm;margin-bottom:0;height: 59mm;font-size:4mm;">哇哦～18天的学习就像一段冒险之旅，为你三周的勇往直前点赞，Science Festiva看到了你的改变和成长。从第一周到第三周，阅读boss越来越难打👺，但是你并没有缴械投降，反而越战越勇，攻势一周比一周猛，成绩也一周比一周好，在寻找和定位信息的修炼之路上，恭喜你练就了鹰之眼，能够在文字之海中快速找到有效的信息，希望你以后持续精进，不断给自己添加新的技能✅，相信你一定能在往后的更加刺激和精彩的英语学习之旅中披襟斩棘，大获全胜️！</div>
				<!-- <textarea id="diy2-border" style="width: 176mm;margin:3mm;margin-bottom:0;height: 36mm;font-size:4mm;resize: none;border:none;outline:none;background:none;"></textarea> -->
			</div>
		</div>
		<div style="width:210mm;height:297mm;background:url(/upload/kly/ScienceFestiva_A_2.png) no-repeat;background-size:210mm 297mm;margin:0;padding:0;position:relative;">
			<div style="width: 188mm;height:244mm;background: #FFF;position: absolute;top:43mm;left:11mm;"></div>
			<h1 style="text-align: center;position: absolute;width: calc(50% - 14mm);left:14mm;top: 53mm;font-size:6mm;"><span class="camp_sn"></span>教材文本整体KPI达成情况</h1>
			<div id="last0" style="width:91mm;height:105mm;position:absolute;top: 80mm;left:14mm;"></div>
			<img src="/upload/kly/aaa.jpg" style="width:111mm;height:65mm;position:absolute;top: 200mm;left:14mm;">
			<h1 style="text-align: center;position: absolute;width: calc(50% - 14mm);right:14mm;top: 53mm;font-size:6mm;left:50%"><span class="camp_sn"></span>非教材文本整体KPI达成情况</h1>
			<div id="last1" style="width:91mm;height:105mm;position:absolute;top: 80mm;left:105mm;"></div>
			<div style="width:59mm;position:absolute;top: 205mm;right:14mm;">
				蓝思（Lexile）分级是由美国教育科研机构为了提高美国学生的阅读能力而研究出的一套衡量学生阅读能力（Reader Ability）与文章难易度（Text Readability）的标准。蓝斯（Lexile）值越高，代表文本难度越难。上方图1、2显示出，学生在本次苦令营中所学习的文本难度在不断增加。可参考左图了解Lexile值所对应的阅读能力分级。
			</div>
		</div>
		<div style="width:210mm;height:297mm;background:url(/upload/kly/ScienceFestiva_A_2.png) no-repeat;background-size:210mm 297mm;margin:0;padding:0;position:relative;">
			<div id="kq-chart" style="width: 192mm;height: 70mm;position: absolute;top: 42mm;left: 9mm;"></div>
			<div id="kq-text" style="text-align: center;width: 175mm;height: 23mm;position: absolute;top: 112mm;left: 19mm;font-size:4mm;padding:3mm;"></div>
			<div style="width:180mm;height:30mm;position:absolute;top:134mm;left:18mm;background:#FFF;"></div>
			<!-- <div id="zy-chart0" style="width: 192mm;height: 70mm;position: absolute;top: 136mm;left:9mm"></div>
			<div id="zy-text" style="text-align: center;width: 175mm;height: 23mm;position: absolute;top: 200mm;left: 19mm;font-size:4mm;padding:3mm;"></div> -->
			<div id="zy1-border" style="width: 176mm;height: 57mm;position: absolute;top: 130mm;left: 18mm;font-size:4mm;resize: none;border:none;outline:none;background: #dceff6;border-radius: 3mm;"></div>
			<textarea id="zy-border" style="width: 171mm;height: 54mm;position: absolute;top: 130mm;left: 18mm;font-size:4mm;resize: none;border:none;outline:none;padding:3mm; background: none;border-radius: 3mm;">恭喜你圆满完成2019年苦令营的学习~
首先，你打败了自己的起床气和小惰性，选择面对每一天的新挑战！为你的坚持点赞！
对于你来说，每天上课时最开心的，回家复习是最痛苦的！但最终，让你头大的视频作业和音频作业，你都也一次不落的完成了~
相信准时参与课堂，按质完成复习的好习惯一定可以为你的学习之路奠定一个坚实的基础！加油吧，少年！</textarea>

			<img src="/upload/kly/ScienceFestivaLogo0.png" style="width: 64%;position: absolute;bottom: 0;left: 18%;z-index:5;">
			<div style="width:90%;height:35mm;position:absolute;bottom:13mm;left:5%;background:#FFF;"></div>
		</div>
    </div>
    <div style="text-align: center;margin-top: 10mm;margin-bottom: 10mm;">
        <button id="btn_save" class="btn btn-success" style="width: 50mm;height: 20mm;font-size: larger;font-weight: bolder" onclick="save_memo()">保存评语</button>
        <button id="btn_pdf" class="btn btn-danger" style="width: 50mm;height: 20mm;font-size: larger;font-weight: bolder" onclick="o_window(false)">保存为PDF</button>
		<button id="btn_pdf" class="btn btn-primary" style="width: 50mm;height: 20mm;font-size: larger;font-weight: bolder" onclick="o_window(true)">print</button>
    </div>
</div>
<script>
var stFullName;
$(function() {
    var param = {
    	_token:"{{csrf_token()}}",
    	id:window.location.href.split('=')[2]
    };
	$.post('/admin/kly_report_get',param,function(res){
		stFullName = res.student["{{$id}}"].ch_name + "-" + res.student["{{$id}}"].en_name;
		drawChart(res);
		drawLastChart(res.camp_name);
		fillText(res);
		setTimeout(function() {
			o_window(false);
		},2);
    });

})

function drawLastChart(camp) {
	camp = Number(camp.split("营")[1]);
	var nameList = ["1分钟正确阅读词数","1分钟正确阅读词数"];
	var nanduList = [[90,110,110],[90,110,150]]
	var data = [
		// 1 a:小 b:大
		[{
			"a":[111.72,142.60,113.28],"b":[135.52,136.71,125.63]
		},{
			"a":[63.42,73.10,82.30],"b":[64.54,79.42,98.49]
		}],

		// 2
		[{
			"a":[117.98,124.90,127.46],"b":[135.52,136.71,125.63]
		},{
			"a":[59.44,71.92,84.45],"b":[64.54,79.42,98.49]
		}],
		// 3
		[{
			"a":[130.53,126.40,126.32],"b":[135.52,136.71,125.63]
		},{
			"a":[65.86,70.27,102.75],"b":[64.54,79.42,98.49]
		}],
		// 4
		[{
			"a":[135.37,154.57,130.02],"b":[135.52,136.71,125.63]
		},{
			"a":[63.51,71.61,94.37],"b":[64.54,79.42,98.49]
		}],
		// 5
		[{
			"a":[157.79,159.50,136.41],"b":[135.52,136.71,125.63]
		},{
			"a":[61.56,93.76,131.57],"b":[64.54,79.42,98.49]
		}],
		// 6
		[{
			"a":[119.48,106.90,118.70],"b":[135.52,136.71,125.63]
		},{
			"a":[62.74,71.62,82.82],"b":[64.54,79.42,98.49]
		}],
		// 7
		[{
			"a":[142.02,111.25,125.52],"b":[135.52,136.71,125.63]
		},{
			"a":[57.84,73.47,108.15],"b":[64.54,79.42,98.49]
		}],
		// 8
		[{
			"a":[128.39,125.53,111.33],"b":[135.52,136.71,125.63]
		},{
			"a":[59.42,99.20,96.30],"b":[64.54,79.42,98.49]
		}],
		// 9
		[{
			"a":[179.55,180.70,142.11],"b":[135.52,136.71,125.63]
		},{
			"a":[77.43,92.82,103.67],"b":[64.54,79.42,98.49]
		}],
	];
	var dataList = data[camp-1];
	for(let i=0;i<2;i++){
		var opt = {
			title: {
				text: nameList[i],
				textStyle:{color:"#9C9EA0",fontSize:16,textAlign:"center"},
			},
			grid:{
				top:80
			},
			animation: false,
			tooltip: {trigger: 'axis'},
			legend: {
				data:['小营平均','大营平均',"难度系数"],
				top:"10%",
				textStyle:{color:"#9C9EA0"},
			},
			color:["#DCD235","#1E4098","#2CA6E0"],
			xAxis: {
				type: 'category',
				boundaryGap: true,
				data:["第1次","第2次","第3次"],
				axisLine: {
					lineStyle: {type: 'solid',color: "#9C9EA0"}
				},
				axisLabel: {
					textStyle: {color: "#9C9EA0"},
					fontSize:16
				}
			},
			yAxis: {
				type: 'value',
				scale:false,
				axisLine: {
					lineStyle: {type: 'solid',color: "#9C9EA0"}
				},
				axisLabel: {
					textStyle: {color: "#9C9EA0"},
					fontSize:16
				},
				splitLine:{
					lineStyle:{color:"#F2F2F3"}
				}
			},
			series: [{
				name:'小营平均',
				type:'line',
				markPoint:{
					data:[{
						value:"xxx"
					}]
				},
				data:dataList[i]["a"],
				itemStyle : { normal: {label : {show: true},textStyle:{color:"#9C9EA0"}}},
				lineStyle : {normal:{width:3}}
			},{
				name:'大营平均',
				type:'line',
				data:dataList[i]["b"],
				itemStyle : { normal: {label : {show: true},textStyle:{color:"#9C9EA0"}}},
				lineStyle : {normal:{width:3}}
			},{
				name:'难度系数',
				type:'bar',
				data:nanduList[i],
				color:"rgba(255, 89, 64, 0.5)",
				barWidth:"50%",
				itemStyle : {
					normal: {
						label : {
							show: true,
							position:"top",
							formatter:function(value){
								return Number(value.value*5 - 50) + "~" + Number(value.value*5 + 50) + "L";
							}
						},
						textStyle:{color:"#9C9EA0"},
					}
				},
			}]
		}
		echarts.init(document.getElementById("last"+i)).setOption(opt);
	}
}

function drawChart(e) {
	var item = [];
	for(i in e.item){
		if(e.item[i].type == "2"){
			item.push(e.item[i].item)
		}
	}
	for(i in item) {
		if(item[i] == "scanning_skimming"){
			var idName = "diy2";
			var name = "信息定位准确率";
			var Xdata = ["个人信息定位准确率","小营平均"]
		}else if(item[i] == "reading_rate"){
			var idName = "diy1";
			var name = "1分钟正确阅读词数";
			var Xdata = ["个人阅读正确单词数","小营平均"]
		}else{
		    continue;
		}
		var opt = {
			title: {
				text: name,
				textStyle:{color:e.color.text,fontSize:16},
			},
			animation: false,
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data:Xdata,
				top:"10%",
				textStyle:{color:e.color.text}
			},
			color:e.color.image,
			grid: {},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data:["营前","营后"],
				axisLine: {
					lineStyle: {type: 'solid',color: e.color.axis}
				},
				axisLabel: {
					textStyle: {color: e.color.text},
					fontSize:16
				}
			},
			yAxis: {
				type: 'value',
				scale:true,
				axisLine: {
					lineStyle: {type: 'solid',color: e.color.axis}
				},
				axisLabel: {
					textStyle: {color: e.color.text},
					fontSize:16
				},
				splitLine:{
					lineStyle:{color:e.color.split}
				}
			},
			series: [{
				name:Xdata[0],
				type:'line',
				data:[e.student["{{$id}}"][item[i]].all[1],e.student["{{$id}}"][item[i]].all[4]],
				itemStyle : { normal: {label : {show: true},textStyle:{color:e.color.text}}},
				lineStyle : {normal:{width:3}}
			},{
				name:'小营平均',
				type:'line',
				data:[e.common['small_'+item[i]+'_score'][1],e.common['small_'+item[i]+'_score'][4]],
				itemStyle : { normal: {label : {show: true},textStyle:{color:e.color.text}}},
				lineStyle : {normal:{width:3}}
			}]
		};
		echarts.init(document.getElementById(idName)).setOption(opt);
	}

	// var zyRateOpt = {
	// 	animation:false,
	// 	legend: {
	// 		textStyle:{
	// 			color:e.color.text
	// 		},
	// 		top:"10%"
	// 	},
	// 	title: {
	// 		text:"作业正常率",
	// 		textStyle:{
	// 			color:e.color.text
	// 		},
	// 	},
	// 	xAxis: {
	// 		type: 'value',
	// 		axisLine: {
	// 			lineStyle: {
	// 				type: 'solid',
	// 				color: e.color.axis,//左边线的颜色
	// 			}
	// 		},
	// 		axisLabel: {
	// 			textStyle: {
	// 				color: e.color.text,//坐标值得具体的颜色

	// 			}
	// 		}
	// 	},
	// 	yAxis: {
	// 		type: 'category',
	// 		axisLine: {
	// 			lineStyle: {
	// 				type: 'solid',
	// 				color: e.color.axis,//左边线的颜色
	// 			}
	// 		},
	// 		axisLabel: {
	// 			textStyle: {
	// 				color: e.color.text,//坐标值得具体的颜色

	// 			}
	// 		},
	// 		splitLine:{
	// 			lineStyle:{
	// 				color:e.color.split
	// 			}
	// 		}
	// 	},
	// 	color:e.color.image,
	// 	series: [{
	// 		type: 'bar',
	// 		label: {
	// 			normal: {
	// 				show: true,
	// 				position: 'right',
	// 				color:e.color.image_display,
	// 				formatter: '{a}\n{c}',
	// 				fontSize: 16,
	// 			}
	// 		},
	// 		data:[e.student[["{{$id}}"]]['zuoye'].rate],name:'个人'
	// 	},{
	// 		type: 'bar',
	// 		label: {
	// 			normal: {
	// 				show: true,
	// 				position: 'right',
	// 				color:e.color.image_display,
	// 				formatter: '{a}\n{c}',
	// 				fontSize: 16,
	// 				}
	// 			},
	// 		data:[e.common.small_zuoye],name:'小营'
	// 	},{
	// 		type: 'bar',
	// 		label: {
	// 			normal: {
	// 				show: true,
	// 				position: 'right',
	// 				color:e.color.image_display,
	// 				formatter: '{a}\n{c}',
	// 				fontSize: 16,
	// 			}
	// 		},
	// 		data:[e.common.big_zuoye],name:'大营'
	// 	}]
	// };
	var kqOpt = {
		legend: {
			textStyle:{
				color:e.color.text,
			},
			top:"10%"
		},
		tooltip: {},
		title: {
			text:"考勤全勤率",
			textStyle:{
				color:e.color.text,
			},
		},
		animation: false,
		color:e.color.image,
		xAxis: {
			type: 'value',
			axisLine: {
				lineStyle: {
					type: 'solid',
					color: e.color.axis,//左边线的颜色
				}
			},
			axisLabel: {
				textStyle: {
					color: e.color.text,//坐标值得具体的颜色
					fontSize:16

				}
			}
		},
		yAxis: {
			type: 'category',
			axisLine: {
				lineStyle: {
					type: 'solid',
					color: e.color.axis,//左边线的颜色
				}
			},
			axisLabel: {
				textStyle: {
					color: e.color.text,//坐标值得具体的颜色
					fontSize:16

				}
			},
			splitLine:{
				lineStyle:{
					color:e.color.split
				}
			}
		},
		series: [{
			type: 'bar',
			label: {
				normal: {
					show: true,
					position: 'right',
					color:e.color.image_display,
					formatter: '{a}\n{c}',
					fontSize: 16,
				}
			},
			data:[e.student['{{$id}}']['kaoqin'].rate],name:'个人'
		},{
			type: 'bar',label: {
				normal: {
					show: true,
					position: 'right',
					color:e.color.image_display,
					formatter: '{a}\n{c}',
					fontSize: 16,
				}
			},
			data:[e.common.small_kaoqin],name:'小营'
		},{
			type: 'bar',label: {
				normal: {
					show: true,
					position: 'right',
					color:e.color.image_display,
					formatter: '{a}\n{c}',
					fontSize: 16,
				}
			},
			data:[e.common.big_kaoqin],name:'大营'
		}]
	};

	// var zyRateChart = echarts.init(document.getElementById("zy-chart0"));
	var kqChart = echarts.init(document.getElementById("kq-chart"));

	// zyRateChart.setOption(zyRateOpt);
	kqChart.setOption(kqOpt);
}

function fillText(res) {
	st = res.student["{{$id}}"];
	// $("#diy1-text").html(st.reading_rate.rate_memo + st.reading_rate.score_memo);
	// $("#diy2-text").html(st.scanning_skimming.rate_memo + st.scanning_skimming.score_memo);
	$("#kq-text").html(st.kaoqin.rate_memo);
	// $("#zy-text").html(st.zuoye.rate_memo);
	$("#ch_name").html(st.ch_name)
	$("#en_name").html(st.en_name)
	$(".camp_sn").html(res.camp_name)
	$("#tutor_name").html(res.tutor)

	if(res.memo.length > 0){
		// $("#diy1-border").html(decodeURI(res.memo[2]));
		// $("#diy2-border").html(decodeURI(res.memo[3]));
		// $("#zy-border").html(decodeURI(res.memo[5]));
	}
}

function save_memo(){
	var url = window.location.href;
	pid = url.split('=')[2];

	let memoArr = [
		emoji_encode($("#radar-border").val()),
		emoji_encode($("#diy0-border").val()),
		// emoji_encode($("#diy1-border").val()),
		// emoji_encode($("#diy2-border").val()),
		emoji_encode($("#kq-border").val()),
		// emoji_encode($("#zy-border").val()),
	];
	let param = {
		_token:"{{csrf_token()}}",
		pid:pid,
		memo:JSON.stringify(memoArr)
	}
	$.post('/admin/kly_report/save_memo',param,function(e){
		alert('操作成功');
	})
}

function o_window(isprint){
	if(isprint){
		alert("请将变距设置为0,勾选背景图层，取消勾选页眉页脚，将缩放设置为100，纸张选择A4");
	}
	var wi = window.open('about:blank', '_blank');

	wi.document.write(document.getElementById('chart_container').outerHTML);

	var listnew = wi.document.getElementsByTagName("canvas");
	var listold = document.getElementsByTagName("canvas");
	for(i=0;i<listold.length;i++){
		var ctx = listold[i].getContext('2d');
		var imgdata = ctx.getImageData(0,0,2500,7500
		);
		var ctxnew = listnew[i].getContext('2d');
		ctxnew.putImageData(imgdata,0,0);
	}
	var oDiv = wi.document.getElementById("chart_container");

	if(isprint){
		wi.document.querySelector("body").style.margin = 0;
		wi.print();
	}else{
		wi.opener.export_pdf(oDiv);
		setTimeout(function(){
			wi.close();
		},1000);
	}
}

function export_pdf(oDiv){
	var contentWidth = 0;
	var contentHeight = 0;
	var w = parseInt(window.getComputedStyle(oDiv).width);
	var h = parseInt(window.getComputedStyle(oDiv).height);
	var canvas1 = document.createElement("canvas");

	html2canvas(oDiv, {canvas:canvas1,width:oDiv.offsetWidth,height:oDiv.offsetHeight,logging:false,scale:1}).then(function(canvas) {
		contentWidth = canvas.width;
		contentHeight = canvas.height;
		//一页pdf显示html页面生成的canvas高度;
		var pageHeight = contentWidth / 595.28 * 841.89;
		//未生成pdf的html页面高度
		var leftHeight = contentHeight;
		//页面偏移
		var position = 0;
		//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
		var imgWidth = 595.28;
		var imgHeight = 595.825 / contentWidth * contentHeight;
		//canvas.getContext("2d").translate(-500,-20);
		var pageData = canvas.toDataURL('image/jpeg', 0.95);
		//console.log(pageData);
		//注①
		var pdf = new jsPDF('', 'pt', 'a4');
		//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
		//当内容未超过pdf一页显示的范围，无需分页
		if (leftHeight < pageHeight) {
			pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
		} else {
			while (leftHeight > 0) {
				//arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
				pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
				leftHeight -= pageHeight;
				position -= 841.89;
				//避免添加空白页
				if (leftHeight > 100) {
					//注②
					pdf.addPage();
				}
			}
		}

		pdf.save(stFullName+'.pdf');
	});
}

function emoji_encode(str){
	if(str){
		return encodeURI(str);
	}else{
		return "";
	}
}
</script>
